<template>
  <a-modal
    v-model:visible="visible"
    draggable
    title="编辑摘要"
    width="40%"
    @cancel="handleChangeVisible"
    @before-ok="onSubmit"
  >
    <a-row>
      <a-col :flex="1">
        <a-form
          :label-col-props="{ span: 3 }"
          :model="formModel"
          :wrapper-col-props="{ span: 18 }"
          label-align="left"
        >
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item field="loginName" label="数据源">
                <a-select
                  v-model="formModel.column"
                  placeholder="请选择"
                  @change="columnChange"
                >
                  <a-option
                    v-for="(item, key) in options"
                    :key="key"
                    :value="item.id"
                    >{{ item.name }}
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
    </a-row>
    <a-input-tag
      :model-value="modelValue"
      :style="{ height: '200px' }"
      @remove="removeMethod"
      @press-enter="pressEnter"
    />
  </a-modal>
</template>

<script lang="ts" setup>
  import useLoading from '@/hooks/loading';
  import { ref } from 'vue';
  import { columnList, ResultVO, RuleItemVO } from '@/api/invoice';
  import { Message } from '@arco-design/web-vue';
  import { TagData } from '@arco-design/web-vue/es/input-tag/interface';
  import { convertTemplateToTags } from '@/utils/tools';

  const generateFormModel = () => {
    return {
      column: '',
    };
  };
  const options = ref<ResultVO[]>([]);
  const inputValue = ref<string>('');
  const modelValue = ref<TagData[]>([]);
  const rowInfo = ref<RuleItemVO>();
  const getSearch = async () => {
    try {
      const { data } = await columnList();
      options.value = data;
    } catch (e) {
      // 错误处理
    }
  };

  const { loading, setLoading } = useLoading();

  const formModel = ref(generateFormModel());
  const visible = ref(false);
  const emit = defineEmits(['select']);
  const columnChange = (value: string) => {
    const selected = options.value.find((item) => item.id === value);
    if (selected) {
      modelValue.value.push({
        label: selected.name,
        value: selected.id,
        tagProps: { color: 'red' },
        closable: true,
        type: 'select',
      });
    }
    formModel.value.column = '';
  };
  const pressEnter = (inputValue: string) => {
    modelValue.value.push({
      label: inputValue,
      value: inputValue,
      closable: true,
      type: 'input',
    });
  };
  const removeMethod = (value: string) => {
    if (modelValue.value && modelValue.value.length > 0) {
      modelValue.value.splice(
        modelValue.value.findIndex((item) => item.value === value),
        1
      );
    }
  };

  function handleChangeVisible(row: RuleItemVO) {
    visible.value = !visible.value;
    if (visible.value) {
      rowInfo.value = row;
      modelValue.value = [];
      if (row && row.summary) {
        modelValue.value = convertTemplateToTags(row.summary, options.value);
      }
    }
  }

  function onSubmit(done: any) {
    if (modelValue.value && modelValue.value.length > 0) {
      inputValue.value = '';
      modelValue.value.forEach((item) => {
        inputValue.value +=
          item.type === 'select' ? `\${${item.value}}` : item.value;
      });
      done();
      emit('select', {
        summary: inputValue.value,
        row: JSON.parse(JSON.stringify(rowInfo.value)),
      });
    } else {
      Message.warning('请输入内容');
      done(false);
    }
  }

  getSearch();
  defineExpose({ handleChangeVisible });
</script>

<script lang="ts">
  export default {
    name: 'InvoiceSummary',
  };
</script>

<style scoped>
  /deep/ .arco-tag.arco-tag-checked.arco-tag-red {
    color: rgb(var(--red-6)) !important;
    background-color: rgb(var(--red-1)) !important;
  }
</style>
